export const steps = () => {
    return {
      "App.vue":`
     

     

      <template>
      <div
        class="content"
      >
      <stepsCard :data="data" />
      </div>
    </template>
    
    <script setup>
    import { ref, reactive, nextTick, onMounted, watch } from "vue";
    import stepsCard from "./stepsCard.vue";
        const data = [
      {
        name: "第一步",
        active: true,
        time: "12:00:00",
        date: "2021-01-01 ",
      },
      {
        name: "第二步",
        active: true,
        time: "12:00:00",
        date: "2021-01-01 ",
      },
      {
        name: "第三步",
        active: false,
        time: "12:00:00",
        date: "2021-01-01 ",
      },
    ];
    
    onMounted(() => {
    });
    </script>
    
    <style scoped >
    .content{
      width: 100%;
      background:#042C67;
      padding-top:300px;
      height: 492px; display: flex;justify-content: center;
    }
    </style>
    
    
      
      
    
    
      
      
    
    
      `,
      "src/stepsCard.vue":`

      <template>
      <div
        class="stepsCard "
        :style="{
          width: stepsWidth + 'px',
        }"
      >
        <template v-for="(item, index) in props.data" :key="index">
          <div :class="['defaultStep']">
            <div
              class="active"
              v-if="index == active"
              :style="{ width: stepCurrentWidth + 'px' }"
            ></div>
            <div class="stepTop" v-if="item.active">
              <div>
                {{ item.date }}
              </div>
              <div>
                {{ item.time }}
              </div>
            </div>
            <div class="title">
              {{ item.name }}
            </div>
          </div>
        </template>
        <div
          class="stepsActiveBox"
          v-for="(item, index) in active"
          :key="item"
          :style="{
            left: stepWidth * (index + 1) - 12 + 'px',
            background: \`linear-gradient(82deg, \${getCurrentColor(index + 1)[0]} 0%,
                      \${getCurrentColor(index + 1)[1]} 100%)\`,
          }"
        ></div>
      </div>
    </template>
    
    <script setup>
    import {
      ref,
      reactive,
      defineEmits,
      onMounted,
      onUpdated,
      computed,
    } from "vue";
    const props = defineProps({
      data: {
        type: Array,
        default: () => [],
      },
      stepsWidth: {
        type: Number,
        default: 500,
      },
    });
    
    /*
        基本数据类型
        引用数据类型（复杂类型） 个人建议 ref初始化变量 
        ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
        ref定义的数据访问的时候要多一个.value
        */
    const stepsWidth = computed(() => {
      return props.stepsWidth;
    });
    const state = reactive({});
    const stepNum = computed(() => {
      return props.data.length - 1;
    });
    
    const stepWidth = computed(() => {
      return stepsWidth.value / stepNum.value;
    });
    const active = computed(() => {
      let num = props.data.filter((item) => item.active);
      console.log("num :>> ", num);
      return num.length - 1;
    });
    
    const stepCurrentWidth = computed(() => {
      return stepWidth.value * active.value;
    });
    
    const getColors = (steps) => {
      function hexToRgb(hex) {
        if (hex.length !== 7 || hex[0] !== "#") {
          throw new Error("请输入正确的16进制颜色值，格式为：#RRGGBB");
        }
    
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);
    
        return [r, g, b];
      }
      function rgbToHex(rgbColor) {
        // 将RGB值转换为16进制颜色值
        return (
          "#" +
          rgbColor
            .map(function(value) {
              return value.toString(16).padStart(2, "0");
            })
            .join("")
        );
      }
    
      function interpolateColors(startColor, endColor, steps) {
        // 计算两个颜色之间的渐变色
        var startRgb = hexToRgb(startColor);
        var endRgb = hexToRgb(endColor);
        var diffRgb = startRgb.map(function(start, i) {
          return (endRgb[i] - start) / steps;
        });
        var colors = [];
        for (var step = 0; step <= steps; step++) {
          var colorRgb = startRgb.map(function(start, i) {
            return Math.round(start + diffRgb[i] * step);
          });
          colors.push(rgbToHex(colorRgb));
        }
        return colors;
      }
    
      // 示例用法
      var startColor = "#016eea";
      var endColor = "#2fd3fe";
      var gradientColors = interpolateColors(startColor, endColor, steps);
      return gradientColors;
    };
    /**
     * 获取当前节点背景色
     */
    const getCurrentColor = (steps) => {
      console.log("stepWidth.value :>> ", stepWidth.value);
      let data = [];
      if (steps != active.value) {
        data.push(
          getColors(stepCurrentWidth.value)[Math.floor(stepWidth.value * steps)]
        );
        data.push(
          getColors(stepCurrentWidth.value)[
            Math.floor(stepWidth.value * steps + 26)
          ]
        );
      } else {
        data.push(
          getColors(stepCurrentWidth.value)[Math.floor(stepWidth.value * steps)]
        );
        data.push(
          getColors(stepCurrentWidth.value)[Math.floor(stepWidth.value * steps)]
        );
      }
      return data;
    };
    
    onUpdated(() => {});
    </script>
    
    <style scoped>
    .stepsCard {
      width: 100%;
      height: 12px;
      background: rgba(59, 130, 253, 0.2);
      position: relative;
      align-items: center;
      justify-content: space-between;
      display: flex;
    }
    .stepsCard:before {
      content: "";
      position: absolute;
      width: 26px;
      height: 26px;
      background: #016eea;
      border-radius: 50%;
      bottom: -9px;
      left: -14px;
    
      z-index: 2;
    }
    
    .defaultStep {
      position: relative;
      height: 12px;
      background: transparent;
    }
    .defaultStep::before {
      content: "";
      position: absolute;
      width: 26px;
      height: 26px;
      background: #0d377e;
      border-radius: 50%;
      bottom: -8px;
      right: -12px;
    }
    .active {
      width: 100%;
      height: 12px;
      position: absolute;
      transform: translateX(-100%);
      background: linear-gradient(82deg, #016eea 0%, #2fd3fe 100%);
    }
    
    .title {
      position: absolute;
      white-space: nowrap;
      bottom: -40px;
      left: 0;
      transform: translateX(-50%);
      font-size: 12px;
      font-weight: 500;
      font-size: 14px;
      color: #d3e4fe;
    }
    .stepTop {
      position: absolute;
      white-space: nowrap;
      top: -60px;
      text-align: center;
      left: 0;
      transform: translateX(-50%);
      font-size: 12px;
      font-weight: 500;
      font-size: 14px;
      color: #d3e4fe;
    }
    .stepsActiveBox {
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 26px;
      height: 26px;
      background: #0d377e;
      border-radius: 50%;
    }
    </style>
    
      
      `
    }
   
  };
  